<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {useRouter} from "vue-router";
import {Download} from "@element-plus/icons-vue";
import {
  addMyCertificateApi, addWorkHonorApi, changeAcademicAchievementApi,
  deleteActualOutPutApi, deleteWorkHonorApi, detailsWorkHonorApi,
  getCertificateTypeListApi,
  getGraduatedListApi,
  getWorkHonorListApi, updateMyCertificateApi, updateWorkHonorApi
} from "@/api/school.js";
import FileUpload from "@/components/FileUpload/index.vue";
import WangEditor from "@/components/WangEditor/index.vue";
import {formatDate, formatDateNoTime, formatTime} from "../../../utils/index.js";

const router = useRouter()

const {proxy} = getCurrentInstance();
const data = reactive({
  title: '新增',
  form: {},
  total: 0,
  total2: 0,
  tableData: [],
  tableData2: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    stuPlace: '',
    stuClass: '',
    stuName: '',
  },
  editForm: {
    id: '',
    stuId: '',
    stuName:'',
    honorFile: '',
    honorTitle:'',
    honorContent:'',
  },
  userInfo: {},
  queryParams2: {
    pageNum: 1,
    pageSize: 10,
  },
  rules: {
    honorTitle: [
      {required: true, message: '请输入荣誉名称', trigger: 'blur'},
    ],
  }
});

const showDia1 = ref(false)
const showDia2 = ref(false)
const selectable = (row) => ![].includes(row.id)


const handleUploadSuccess = (response, file, fileList) => {
  console.log(response, file, fileList)
}

const handleEdit = (index) => {
  router.push('noticeEdit')
}

const handleJump = (path,row) => {
  router.push({
    path,
    query: {
      stuId: row.id
    }
  })
}

const getDataList = async () => {
  const res = await getGraduatedListApi(data.queryParams)
  if (res.code == 200) {
    data.tableData = res.rows
    data.total = res.total
  }
}

const resetSearch = () => {
  proxy.resetForm("queryRef");
  data.queryParams = {
    pageNum: 1,
    pageSize: 10,
  }
  getDataList()
}

// 查询 在职荣誉
const handleJobHonor = async (row) => {
  data.editForm = {
    ...data.editForm,
    stuName: row.stuName,
    stuId: row.id,
  }
  data.userInfo.stuName = row.stuName
  data.queryParams2.stuId = row.stuId
  await getDataList2()
  showDia1.value = true
}

const getDataList2 = async () => {
  const res = await getWorkHonorListApi(data.queryParams2)
  if (res.code == 200) {
    data.tableData2 = res.rows
    data.total2 = res.total
  }
}

const submitForm = () => {
  console.log(data.editForm.id,"data.editForm.id")
  proxy.$refs["formRef2"].validate(async (valid) => {
    if (valid) {
      let res = ''
      if (data.editForm.id === '') {
        res = await addWorkHonorApi(data.editForm)
      } else {
        res = await updateWorkHonorApi(data.editForm)
      }

      if (res.code == 200) {
        proxy.$message.success('操作成功')
        handleClose()
        await getDataList2()
      }
    }
  })
}


// 在职荣誉详情

// 删除在职荣誉
const handleDelete = (id) => {
  proxy.$modal.confirm('是否删除该数据？').then(async () => {
    const res = await deleteWorkHonorApi({id})
    if (res.code == 200) {
      proxy.$modal.msgSuccess("删除成功")
    }
    await getDataList()
  })
}

// 关闭在职荣誉弹窗
const handleClose = () => {
  showDia2.value = false
  data.editForm = {
    id: '',
    stuId: '',
    stuName:'',
    honorFile: '',
    honorTitle:'',
    honorContent:'',
  }
  proxy.resetForm("formRef2");
  data.title = '新增在职荣誉'
}

const handleClose2 = () => {
  showDia1.value = false
}
// 查看详情
const handleDetails = async (row) => {
  data.editForm = {
    ...data.editForm,
    stuName: row.stuName,
    stuId: row.stuId,
  }

  const res = await detailsWorkHonorApi({id: row.id})
  if(res.code == 200){
    data.editForm = {
      ...data.editForm,
      id: res.data.id,
      honorTitle: res.data.honorTitle,
      honorContent: res.data.honorContent,
      honorFile: res.data.honorFile,
    }
  }
  showDia2.value = true
}

const handleAdd = () => {
  showDia2.value = true
  data.title = '新增在职荣誉'
}

const changeGood = async (e, stuId) => {
  const data = {
    id: stuId,
    isGood: e
  }
  const res = await changeAcademicAchievementApi(data)
  if (res.code === 200) {
    proxy.$message.success('修改成功')
    await getDataList()
  } else {
    proxy.$message.error(res.msg)
  }

}

onMounted(() => {
  getDataList()
})
</script>

<template>
  <div class="outBox">
    <CardBox style="margin-bottom: 20px" title="筛选查询">
      <template #btn-cont>
        <el-button type="primary" @click="getDataList">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </template>
      <template #content>
        <el-form :model="data.queryParams" label-width="auto" inline="true">
          <el-form-item label="姓名">
            <el-input v-model="data.queryParams.stuName"/>
          </el-form-item>
          <el-form-item label="院系">
            <el-input v-model="data.queryParams.stuFaculties"/>
          </el-form-item>
          <el-form-item label="户籍地">
            <el-input v-model="data.queryParams.stuPlace"/>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="data.queryParams.stuPhone"/>
          </el-form-item>
        </el-form>
      </template>
    </CardBox>
    <CardBox title="毕业生管理">
      <template #btn-cont>
        <el-button type="primary">
          <el-icon>
            <Download/>
          </el-icon>
          <span>导出</span>
        </el-button>
<!--        <el-button type="primary" @click="handleJump('graduateManagement/archivingManagement')">归档管理</el-button>-->
<!--        <el-button type="primary">一键归档</el-button>-->
<!--        <el-button type="primary">新增导入</el-button>-->
      </template>
      <template #content>
        <el-table :data="data.tableData" style="width: 100%">
          <el-table-column type="selection" :selectable="selectable" width="55"/>
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="stuName" label="姓名" align="center"/>
          <el-table-column prop="stuFaculties" label="院系" align="center"/>
          <el-table-column prop="stuClass" label="班级" align="center"/>
          <el-table-column prop="stuGradYear" label="毕业年份" align="center" width="100"/>
          <el-table-column prop="stuPhone" label="联系电话" align="center"/>
          <el-table-column prop="stuPlace" label="户籍地" align="center" width="200"/>
          <el-table-column prop="isGood" label="是否上墙" align="center">
            <template #default="scope">
              <el-switch v-model="scope.row.isGood" @change="changeGood($event,scope.row.id)" active-value="1"
                         inactive-value="0"/>
            </template>
          </el-table-column>
          <el-table-column prop="g" label="在校档案" align="center">
            <template #default="scope">
              <el-button type="primary" link @click="handleJump('/honor/graduateManagement/schoolArchives',scope.row)">查看详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="g" label="在职荣誉" align="center">
            <template #default="scope">
              <el-button type="primary" link @click="handleJobHonor(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pageBox">
          <pagination
              v-show="data.total > 0"
              :total="data.total"
              v-model:page="data.queryParams.pageNum"
              v-model:limit="data.queryParams.pageSize"
              @pagination="getDataList"
          />
        </div>
      </template>
    </CardBox>

    <el-dialog v-model="showDia1" title="在职荣誉" width="80%" style="height: 80vh">
      <CardBox :title="data.userInfo.stuName + ':在职荣誉'">
        <template #btn-cont>
          <el-button type="primary" @click="handleAdd">新增荣誉</el-button>
        </template>
        <template #content>
          <el-table :data="data.tableData2" style="width: 100%">
            <el-table-column label="序号" type="index" width="50" align="center"/>
            <el-table-column prop="stuName" label="姓名" align="center"/>
            <el-table-column prop="honorTitle" label="荣誉标题" align="center"/>
            <el-table-column prop="createTime" label="创建时间" align="center">
              <template #default="scope">
                {{ formatDateNoTime(scope.row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="honorFile" label="荣誉证书或材料" align="center">
              <template #default="scope">
                <file-pre-view :url="scope.row.honorFile" width="80px" height="80px"/>
              </template>
            </el-table-column>
            <el-table-column prop="g" label="操作" align="center">
              <template #default="scope">
                <el-button type="primary" link @click="handleDetails(scope.row)">编辑</el-button>
                <el-button type="danger" link @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pageBox">
            <pagination
                v-show="data.total2 > 0"
                :total="data.total2"
                v-model:page="data.queryParams2.pageNum"
                v-model:limit="data.queryParams2.pageSize"
                @pagination="getDataList2"
            />
          </div>
        </template>
      </CardBox>
      <template #footer>
        <div class="footer">
          <el-button @click="handleClose2">返回</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="showDia2" :title="data.title" width="40%" @close="handleClose">
      <el-form ref="formRef2" :model="data.editForm" label-width="80px" :rules="data.rules">
        <el-form-item label="姓名">
          <p class="stuName">{{data.editForm.stuName}}</p>
        </el-form-item>
        <el-form-item label="荣誉名称" prop="honorTitle">
          <el-input v-model="data.editForm.honorTitle" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="颁发单位">
          <el-input v-model="data.editForm.honorContent" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
              v-model="data.editForm.createTime"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="荣誉证书或材料：" label-position="top" label-width="150" prop="honorFile">
          <div class="uploadBox">
            <FileUpload
                :multiple="false"
                :limit="1"
                v-model="data.editForm.honorFile"
            />
          </div>
        </el-form-item>
      </el-form>

      <template #footer>

        <div class="footer">
          <el-button @click="handleClose">返回</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.stuName{
  margin: 0 !important;
}
.uploadBox {
  margin-left: 50px;
}

.footer {
  text-align: center;
}
:deep(.el-dialog__body){
  margin-bottom: 40px;
}
:deep(.el-dialog__footer){
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

</style>
